﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/vue.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/element-index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/element-index.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/axios.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/DeviceManage/index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/echarts.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/ShellManage/shell.css"))
}
<div class="container-div" id="deviceManage_cc03-vue">
    <!-- 第一部分 页面切换 -->
    <div style="margin:20px 0">
        <el-row>
            <el-col :span="8">
                <el-button type="warning" plain v-on:click="ShowHistory()">历史状态</el-button>
                <el-button type="primary" plain v-on:click="controlShow = true">当前状态</el-button>
            </el-col>
            <el-col :span="6" :offset="10">
                <span class="myspan">机床连接状态：</span>
                <span :class="['mycomLight',{'myTrueActive':deviceStatus}]"></span>
            </el-col>
        </el-row>
    </div>

    <!-- 当前页面 -->
    <div v-show="controlShow">
        <el-row :gutter="20">
            <el-col :span="10" :offset="2">
                <el-card>
                    <div slot="header" class="myhead">
                        <div>加工数据</div>
                    </div>
                    <div>
                        <div class="my-p">
                            <div class="my-p-l">设备状态</div>
                            <div class="my-p-r">
                                <el-tag :type="productionData.deviceStatusType">
                                    {{
                    productionData.deviceStatusInfo
                                    }}
                                </el-tag>
                            </div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">设备模式</div>

                            <div class="my-p-r">
                                <el-tag :type="productionData.openModeType">
                                    {{productionData.openMode}}
                                </el-tag>
                            </div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">订单编号</div>
                            <div class="my-p-r">{{ productionData.orderCode }}</div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">物料编码</div>
                            <div class="my-p-r">{{ productionData.materilCode }}</div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">加工程序名称</div>
                            <div class="my-p-r">{{ productionData.workProgram }}</div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">当前程序加工时间</div>
                            <div class="my-p-r">{{ productionData.NcuCycleTime }} min</div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">程序加工累计时间</div>
                            <div class="my-p-r">{{ productionData.NcuOperationTime }} min</div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="10" :offset="2">
                <el-card>
                    <div slot="header">
                        <div>主轴数据</div>
                    </div>
                    <div>
                        <div class="my-p">
                            <div class="my-p-l">主轴刀具名</div>
                            <div class="my-p-r">{{ mainAxisData.ActToolName }}</div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">当前刀沿</div>
                            <div class="my-p-r">{{ mainAxisData.ActDNumber }}</div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">主轴设置速度</div>
                            <div class="my-p-r">{{ mainAxisData.SpindleSetSpeed }}</div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">主轴实际速度</div>
                            <div class="my-p-r">{{ mainAxisData.SpindleActSpeed }}</div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">主轴负载</div>
                            <div class="my-p-r">{{ mainAxisData.SpindleLoad }}</div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">主轴倍率</div>
                            <div class="my-p-r">{{ mainAxisData.SpindleSpeedOverRate }}</div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">切削指定速度</div>
                            <div class="my-p-r">{{ mainAxisData.SpindleSetFeedRate }}</div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">切削实际速度</div>
                            <div class="my-p-r">{{ mainAxisData.SpindleActFeedRate }}</div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">切削倍率</div>
                            <div class="my-p-r">{{ mainAxisData.CutSpeedOverRate }}</div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">当前轴坐标 X</div>
                            <div class="my-p-r">{{ mainAxisData.ActToolBasePosX }}</div>
                        </div>
                        <div class="my-p">
                            <div class="my-p-l">当前轴坐标 Z</div>
                            <div class="my-p-r">{{ mainAxisData.ActToolBasePosZ }}</div>
                        </div>
                    </div>
                </el-card>
            </el-col>

        </el-row>
        <!-- 报警列表 -->
        <div v-show="alarmShow" style="margin:20px 0">
            <el-table style="width: 90%" border
                      :data="alarmList"
                      :header-cell-style="headerStyle"
                      :cell-style="cellStyle">
                <el-table-column type="index"
                                 label="序号">
                </el-table-column>
                <el-table-column prop="alarmID"
                                 label="报警编号">
                </el-table-column>
                <el-table-column prop="alarmInfo"
                                 label="报警信息">
                </el-table-column>
                <el-table-column prop="occurTime"
                                 label="发生时间">
                </el-table-column>
            </el-table>
        </div>
    </div>

    <!-- 历史页面 -->
    <div v-show="!controlShow">
        <!-- 搜索条件 -->
        <div style="margin-bottom:20px">
            <el-row>
                <el-col :span="24">
                    <el-date-picker v-model="timeValue"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                    </el-date-picker>
                    <el-button style="margin-left: 20px"
                               type="info"
                               icon="el-icon-search"
                               circle="" v-on:click="getHistoryData()"></el-button>
                </el-col>
            </el-row>
        </div>
        <!-- 状态显示 -->
        <div>
            <div id="chart" style="width:100%;height:200px"></div>
        </div>
        <div style="margin:20px 0px">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form class="submitclass" ref="form" :model="form" label-width="80px">
                        <el-form-item label="开始时间">
                            <el-input v-model="form.stime" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="结束时间">
                            <el-input v-model="form.etime" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="时间长度">
                            <el-input v-model="form.totalTime" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="机器状态">
                            <el-input v-model="form.status" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="选择故障">
                            <el-cascader size="medium"
                                         :clearable="true"
                                         v-model="form.value"
                                         :options="form.options"></el-cascader>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input type="textarea" v-model="form.desc"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="onSubmit" :loading="formLoading">{{formLoading?'提交中...':'提交'}}</el-button>
                            <el-button>取消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <div style="height:450px;overflow:hidden;overflow-y:scroll;padding:0px 5px;">
                        <el-timeline :reverse="true">
                            <el-timeline-item v-for="item in lineCardData" :key="item.detail"
                                              :timestamp="item.timestamp" placement="top">
                                <el-card>
                                    <div>一级故障：{{item.Reason_1}}</div>
                                    <div>二级故障：{{item.Reason_2}}</div>
                                    <div>三级故障：{{item.Reason_3}}</div>
                                    <div>四级故障：{{item.Reason_4}}</div>
                                    <div>备注：{{item.Des}}</div>
                                    <p>{{item.detail}}</p>
                                </el-card>
                            </el-timeline-item>
                        </el-timeline>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</div>

<script>
    let option = {
        grid: {
            top: 30,
            bottom: 60,
            left: "5%",
            right: "5%"
        },
        dataZoom: {
            type: "slider",
            filterMode: "weakFilter",
            showDataShadow: false,
            bottom: 10,
            height: 10,
            borderColor: "transparent",
            backgroundColor: "#e2e2e2",
            handleIcon:
                "M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z", // jshint ignore:line
            handleSize: 20,
            handleStyle: {
                shadowBlur: 6,
                shadowOffsetX: 1,
                shadowOffsetY: 2,
                shadowColor: "#aaa"
            },
            labelFormatter: ""
        },
        xAxis: {
            type: "time",
            axisLine: {
                show: true
            },
            axisTick: {
                show: true,
                inside: true
            },
            minorTick: {
                show: true
            },
            axisLabel: {
                show: true,
                color: "#9B9B9B",
                fontSize: 14,
                fontWeight: 400
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: "value",
            max: 2,
            min: 0,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                show: false
            }
        },
        legend: {
            show: true,
            data: ["断开", "停止", "加工",'等待','报警'],
            right: "5%"
        },
        series: [
            {
                type: "custom",
                name: "断开",
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "#f2eada"
                            },
                            {
                                offset: 1,
                                color: "#d9d6c3"
                            }
                        ])
                    }
                },
                renderItem: function (params, api) {
                    var yValue = api.value(2);
                    var start = api.coord([api.value(0), yValue]);
                    var size = api.size([api.value(1) - api.value(0), yValue]);
                    var style = api.style();
                    var heigh = api.size([api.value(1) - api.value(0), yValue]) * 0.5;

                    return {
                        type: "rect",
                        shape: {
                            x: start[0],
                            y: start[1],
                            width: size[0],
                            height: size[1] - 10
                        },
                        style: style,
                        styleEmphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowColor: "rgba(0,0,0,0.5)",
                            r: [20, 20, 0, 0]
                        }
                    };
                },
                encode: {
                    x: [0, 1],
                    y: [2]
                },
                data: []
            },
            {
                type: "custom",
                name: "停止",
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "#909399"
                            },
                            {
                                offset: 1,
                                color: "#606266"
                            }
                        ])
                    }
                },
                renderItem: function (params, api) {
                    var yValue = api.value(2);
                    var start = api.coord([api.value(0), yValue]);
                    var size = api.size([api.value(1) - api.value(0), yValue]);
                    var style = api.style();
                    var heigh = api.size([api.value(1) - api.value(0), yValue]) * 0.5;

                    return {
                        type: "rect",
                        shape: {
                            x: start[0],
                            y: start[1],
                            width: size[0],
                            height: size[1] - 10
                        },
                        style: style,
                        styleEmphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowColor: "rgba(0,0,0,0.5)",
                            r: [20, 20, 0, 0]
                        }
                    };
                },
                encode: {
                    x: [0, 1],
                    y: [2]
                },
                data: []
            },
            {
                type: "custom",
                name: "加工",
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "#38CC3E"
                            },
                            {
                                offset: 1,
                                color: "#90EE90"
                            }
                        ])
                    }
                },
                renderItem: function (params, api) {
                    var yValue = api.value(2);
                    var start = api.coord([api.value(0), yValue]);
                    var size = api.size([api.value(1) - api.value(0), yValue]);
                    var style = api.style();
                    var heigh = api.size([api.value(1) - api.value(0), yValue]) * 0.5;

                    return {
                        type: "rect",
                        shape: {
                            x: start[0],
                            y: start[1],
                            width: size[0],
                            height: size[1] - 10
                        },
                        style: style,
                        styleEmphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowColor: "rgba(0,0,0,0.5)",
                            r: [10, 10, 0, 0]
                        }
                    };
                },
                encode: {
                    x: [0, 1],
                    y: [2]
                },
                data: []
            },
            {
                type: "custom",
                name: "等待",
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "#F7B62D"
                            },
                            {
                                offset: 1,
                                color: "#fccb05"
                            }
                        ])
                    }
                },
                renderItem: function (params, api) {
                    var yValue = api.value(2);
                    var start = api.coord([api.value(0), yValue]);
                    var size = api.size([api.value(1) - api.value(0), yValue]);
                    var style = api.style();
                    var heigh = api.size([api.value(1) - api.value(0), yValue]) * 0.5;

                    return {
                        type: "rect",
                        shape: {
                            x: start[0],
                            y: start[1],
                            width: size[0],
                            height: size[1] - 10
                        },
                        style: style,
                        styleEmphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowColor: "rgba(0,0,0,0.5)",
                            r: [20, 20, 0, 0]
                        }
                    };
                },
                encode: {
                    x: [0, 1],
                    y: [2]
                },
                data: []
            },
            {
                type: "custom",
                name: "报警",
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: "#F56C6C"
                            },
                            {
                                offset: 1,
                                color: "#FFC0CB"
                            }
                        ])
                    }
                },
                renderItem: function (params, api) {
                    var yValue = api.value(2);
                    var start = api.coord([api.value(0), yValue]);
                    var size = api.size([api.value(1) - api.value(0), yValue]);
                    var style = api.style();
                    var heigh = api.size([api.value(1) - api.value(0), yValue]) * 0.5;

                    return {
                        type: "rect",
                        shape: {
                            x: start[0],
                            y: start[1],
                            width: size[0],
                            height: size[1] - 10
                        },
                        style: style,
                        styleEmphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowOffsetY: 0,
                            shadowColor: "rgba(0,0,0,0.5)",
                            r: [20, 20, 0, 0]
                        }
                    };
                },
                encode: {
                    x: [0, 1],
                    y: [2]
                },
                data: []
            }
        ]
    };
    let app = new Vue({
        el: "#deviceManage_cc03-vue",
        data: {
            mychart: null,
            controlShow: false,
            alarmShow: false,   // 控制报警表格显示，有报警时显示
            alarmList: [],
            form: {
                value: '',
                name: "",
                stime: null,
                etime: null,
                totalTime: null,
                status: null,
                region: "",
                date1: "",
                date2: "",
                delivery: false,
                type: [],
                resource: "",
                desc: "",
                options: [
                    {
                        value: "计划内",
                        label: "计划内",
                        children: [
                            {
                                value: "生产准备",
                                label: "生产准备",
                                children: [
                                    {
                                        value: "上下料车生产前检查",
                                        label: "上下料车生产前检查",
                                    },
                                    {
                                        value: "车床生产前检查",
                                        label: "车床生产前检查",
                                    },
                                    {
                                        value: '产线清理',
                                        label:'产线清理'
                                    }
                                ],
                            },
                            {
                                value: "外部因素",
                                label: "外部因素",
                                children: [
                                    {
                                        value: "线路故障",
                                        label: "线路故障",
                                    },
                                    {
                                        value: "订单完工",
                                        label: "订单完工",
                                    },
                                    {
                                        value: "清洗消毒",
                                        label: "清洗消毒",
                                    },
                                    {
                                        value: "其他",
                                        label: "其他",
                                    },
                                ],
                            }
                        ],
                    },
                    {
                        value: "计划外",
                        label: "计划外",
                        children: [
                            {
                                value: "非生产线停机",
                                label: "非生产线停机",
                                children: [
                                    {
                                        value: "原物料供应不足",
                                        label: "原物料供应不足",
                                    },
                                    {
                                        value: "质量问题",
                                        label: "质量问题",
                                    },
                                    {
                                        value: '培训/消防培训',
                                        label:'培训/消防培训'
                                    },
                                    {
                                        value: "其他",
                                        label: "其他",
                                    }
                                ],
                            }
                        ],
                    },
                    {
                        value: "程序因素",
                        label: "程序因素",
                        children: [
                            {
                                value: "程序更新",
                                label: "程序更新",
                            },
                            {
                                value: "急停",
                                label: "急停",
                            },
                            {
                                value: "人员操作不熟练",
                                label: "人员操作不熟练",
                            },
                        ],
                    },
                ],
            },
            productionData: {
                deviceStatusType: "error",
                deviceStatusInfo: "未知",
                orderCode: "NULL",
                materilCode: "NULL",
                workTime: "0(min)",
                workProgram: "未知",
                runTime: "0(min)",
                openMode: '未知',
                openModeType: 'error',
                NcuCycleTime: 0,
                NcuOperationTime:0
            },
            axisData: [
                {
                    info: "位置(mm)",
                    X: 0,
                    Y: 0,
                    Z: 0,
                },
                {
                    info: "速度(mm/min)",
                    X: 0,
                    Y: 0,
                    Z: 0,
                },
                {
                    info: "电机温度",
                    X: 0,
                    Y: 0,
                    Z: 0,
                },
                {
                    info: "电流(A)",
                    X: 0,
                    Y: 0,
                    Z: 0,
                },
            ],
            mainAxisData: {
                toolName: "未知",
                speed: 0,
                power: 0,
                torque: 0,
                feedRate: 0,
                tmp: 0,
                SpindleSetSpeed: 0,
                SpindleActSpeed: 0,
                SpindleLoad:0,
                ActToolName: '未知',
                ActDNumber: 0,
                SpindleSpeedOverRate: 0,
                SpindleSetFeedRate: 0,
                SpindleActFeedRate: 0,
                CutSpeedOverRate: 0,
                ActToolBasePosX: 0,
                ActToolBasePosZ:0
            },
            timeValue: [],
            searchStart: '',
            searchEnd:'',
            deviceCode: 'Lathe03',
            deviceStatus: false,
            formLoading: false,
            lineCardData: [
                {
                    timestamp: '',
                    Reason_1: '',
                    Reason_1: '',
                    Reason_1: '',
                    Reason_1: '',
                    Des: '',
                    detail:''
                }
            ]
        },
        methods: {
            // 表头样式设置
            headerStyle(obj) {
                return {
                    "background-color": "rgb(153,204,255)",
                };
            },
            // 单元格样式设置
            cellStyle(obj) {
                if (obj.columnIndex == 0) {
                    return {
                        "background-color": "rgb(204,255,204)",
                        "font-weight": 700,
                    };
                }
            },
            // 查看历史
            ShowHistory() {
                this.controlShow = false;
                setTimeout(() => {
                    this.mychart.resize();
                }, 300)
            },
            // 获取设备当天的历史状态信息
            GetTodayData() {
                let url = '@Url.Content("~/DeviceManage/DeviceDetail/GetDeviceBaiscInfo")'
                axios.get(url, {
                    params: {
                        deviceCode: this.deviceCode
                    }
                }).then(res => {
                    let data = res.data;
                    console.log(data)
                    if (data.ProgramName != null) {
                        if (data.ProgramName != this.productionData.workProgram) {
                            this.productionData.workProgram = data.ProgramName
                        }
                    }
                    if (data.CncStatus != -1) {
                        let result = this.cncStatusFilter(data.CncStatus)
                        if (this.productionData.deviceStatusInfo != result.split("-")[0]) {
                            this.productionData.deviceStatusInfo = result.split("-")[0]
                            this.productionData.deviceStatusType = result.split("-")[1]
                        }
                    }
                    if (data.NcuBootTime != -1) {
                        if (this.productionData.runTime != (data.NcuBootTime.toFixed(2) + 'min')) {
                            this.productionData.runTime = data.NcuBootTime.toFixed(2) + 'min'
                        }
                    }
                    if (data.CncOpMode != -1) {
                        let result = this.cncModeFilter(data.CncOpMode)
                        if (this.productionData.openMode!=result.split("-")[0] ) {
                            this.productionData.openMode = result.split("-")[0]
                            this.productionData.openModeType = result.split("-")[1]
                        }
                    }
                    if (this.productionData.NcuOperationTime != data.NcuOperationTime.toFixed(2)) {
                        this.productionData.NcuOperationTime = data.NcuOperationTime.toFixed(2)
                    }
                    if (this.productionData.NcuCycleTime != data.NcuCycleTime.toFixed(2)) {
                        this.productionData.NcuCycleTime = data.NcuCycleTime.toFixed(2)
                    }
                    if (this.mainAxisData.ActToolName != data.ActToolName) {
                        this.mainAxisData.ActToolName = data.ActToolName
                    }
                    if (this.mainAxisData.ActDNumber != data.ActDNumber) {
                        this.mainAxisData.ActDNumber = data.ActDNumber
                    }
                    if (this.mainAxisData.ActToolBasePosX != data.ActToolBasePosX.toFixed(2)) {
                        this.mainAxisData.ActToolBasePosX = data.ActToolBasePosX.toFixed(2)
                    }
                    if (this.mainAxisData.ActToolBasePosZ != data.ActToolBasePosZ.toFixed(2)) {
                        this.mainAxisData.ActToolBasePosZ = data.ActToolBasePosZ.toFixed(2)
                    }
                    if (this.mainAxisData.SpindleSetSpeed != data.SpindleSetSpeed.toFixed(2)) {
                        this.mainAxisData.SpindleSetSpeed = data.SpindleSetSpeed.toFixed(2)
                    }
                    if (this.mainAxisData.SpindleActSpeed != data.SpindleActSpeed.toFixed(2)) {
                        this.mainAxisData.SpindleActSpeed = data.SpindleActSpeed.toFixed(2)
                    }
                    if (this.mainAxisData.SpindleSetFeedRate != data.SpindleSetFeedRate.toFixed(2)) {
                        this.mainAxisData.SpindleSetFeedRate = data.SpindleSetFeedRate.toFixed(2)
                    }
                    if (this.mainAxisData.SpindleActFeedRate != data.SpindleActFeedRate.toFixed(2)) {
                        this.mainAxisData.SpindleActFeedRate = data.SpindleActFeedRate.toFixed(2)
                    }
                    if (this.mainAxisData.SpindleSpeedOverRate != data.SpindleSpeedOverRate.toFixed(2)) {
                        this.mainAxisData.SpindleSpeedOverRate = data.SpindleSpeedOverRate.toFixed(2)
                    }
                    if (this.mainAxisData.CutSpeedOverRate != data.CutSpeedOverRate.toFixed(2)) {
                        this.mainAxisData.CutSpeedOverRate = data.CutSpeedOverRate.toFixed(2)
                    }
                    if (this.mainAxisData.SpindleLoad != data.SpindleLoad.toFixed(2)) {
                        this.mainAxisData.SpindleLoad = data.SpindleLoad.toFixed(2)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // CNC状态Filter
            cncStatusFilter(data) {
                let result="未知-error"
                switch (data) {
                    case -1: {
                        result ='未知-error'
                        break;
                    }
                    case 0: {
                        result='未知-error'
                        break;
                    }
                    case 1: {
                        result ='interrupted-info'
                        break;
                    }
                    case 2: {
                        result = 'stopped-warning'
                        break;
                    }
                    case 3: {
                        result = 'progresss-success'
                        break;
                    }
                    case 4: {
                        result = 'waiting-primary'
                        break;
                    }
                    case 5: {
                        result = 'aborted-error'
                        break;
                    }
                }
                return result;
            },
            // CNC模式Filter
            cncModeFilter(data) {
                let result='未知-error'
                switch (data) {
                    case 0: {
                        result ='JOG-primary'
                        break;
                    }
                    case 1: {
                        result = 'MDI-warning'
                        break;
                    }
                    case 2: {
                        result = 'AUTO-success'
                        break;
                    }
                }
                return result;
            },
            // 提交记录历史数据
            onSubmit() {
                let url = '@Url.Content("~/DeviceManage/DeviceDetail/RecordDeviceStatusInfo")'
                this.formLoading = true;
                let Reason_2 = '';
                let Reason_3 = '';
                let Reason_4 = '';
                if (this.form.status == '加工') {
                    this.$message({
                        showClose: true,
                        duration: 2500,
                        message: '提示：正常加工状态，不需要填写故障记录',
                        type: 'info',
                        offset: 80
                    })
                    this.formLoading = false;
                    return;
                }
                if (this.form.value.length < 1) {
                    this.$message({
                        showClose: true,
                        duration: 2500,
                        message: '提示：请选择故障',
                        type: 'info',
                        offset: 80
                    })
                    this.formLoading = false;
                    return;
                }
                if (this.form.value.length == 2) {
                    Reason_2 = this.form.value[1];
                }
                if (this.form.value.length == 3) {
                    Reason_2 = this.form.value[1];
                    Reason_3 = this.form.value[2];
                }
                if (this.form.value.length == 4) {
                    Reason_2 = this.form.value[1];
                    Reason_3 = this.form.value[2];
                    Reason_4 = this.form.value[3];
                }
                axios.get(url, {
                    params: {
                        deviceCode: this.deviceCode,
                        stime: this.form.stime,
                        etime: this.form.etime,
                        Reason_1: this.form.value[0],
                        Reason_2: Reason_2,
                        Reason_3: Reason_3,
                        Reason_4: Reason_4,
                        Des: this.form.desc,
                        Author: 'admin'
                    }
                }).then(res => {
                    if (res.data.result) {
                        this.$notify({
                            title: 'Success',
                            message: "数据保存成功",
                            duration: 2000,
                            type: 'success'
                        })
                        this.form.desc = ''
                        this.form.value=''
                        // 调用更新右侧填写时间线方法
                        this.getRecordInfoData();
                    } else {
                        this.$message({
                            showClose: true,
                            duration: 2500,
                            message: '保存数据失败：' + res.data.message,
                            type: 'warning',
                            offset: 80
                        })
                    }
                    this.formLoading = false;
                }).catch(err => {
                    this.formLoading = false;
                    this.$message({
                        showClose: true,
                        duration: 2500,
                        message: '错误！！！保存数据失败：'+err,
                        type: 'error',
                        offset: 80
                    })
                })
            },
            // 获取记录历史数据
            getRecordInfoData() {
                let url = '@Url.Content("~/DeviceManage/DeviceDetail/GetInfoRecord")'
                axios.get(url, {
                    params: {
                        deviceCode: this.deviceCode,
                        stime: this.form.stime,
                        etime: this.form.etime
                    }
                }).then(res => {
                    let data = res.data.result;
                    this.lineCardData = [];
                    if (data != null && data.length != 0) {
                        for (let i = 0; i < data.length; i++) {
                            let timestamp = data[i].RecordTime.split("T")[0];
                            let Reason_1 = data[i].Reason_1;
                            let Reason_2 = data[i].Reason_2;
                            let Reason_3 = data[i].Reason_3;
                            let Reason_4 = data[i].Reason_4;
                            let Des = data[i].Des;
                            let detail = data[i].Author + " 提交于 " + data[i].RecordTime.split("T")[0] + " " + (data[i].RecordTime.split("T")[1]).split(".")[0];
                            this.lineCardData.push({ timestamp, Reason_1, Reason_2, Reason_3, Reason_4, Des, detail })
                        }
                    } else {
                        this.lineCardData = [{ timestamp: '', Reason_1: '', Reason_1: '', Reason_1: '', Reason_1: '', Des: '', detail: '' }];
                    }
                }).catch(err => {
                    this.$message({
                        showClose: true,
                        duration: 2500,
                        message: '错误！！！获取记录数据失败：' + err,
                        type: 'error',
                        offset: 80
                    })
                })
            },
            // 获取Echarts历史数据
            getHistoryData() {
                this.mychart.showLoading()
                const _start = this.timeValue[0];
                const _end = this.timeValue[1];
                this.searchStart = _start.getFullYear() + "-" + (_start.getMonth() + 1) + "-" + _start.getDate();
                this.searchEnd = _end.getFullYear() + "-" + (_end.getMonth() + 1) + "-" + _end.getDate();
                let url = '@Url.Content("~/DeviceManage/DeviceDetail/GetDeviceHistory")'
                axios.get(url, {
                    params: {
                        deviceCode: this.deviceCode,
                        stime: this.searchStart,
                        etime: this.searchEnd
                    }
                }).then(res => {
                    if (res.data.result != null && res.data.result!=[]) {
                        this.historyDataFactory(res.data.result);
                    }
                    this.mychart.hideLoading();
                }).catch(err => {
                    this.$message({
                        showClose: true,
                        duration: 2500,
                        message: '错误！！！获取历史数据失败：' + err,
                        type: 'error',
                        offset: 80
                    })
                    this.mychart.hideLoading();
                })
            },
            // 数据处理
            historyDataFactory(data) {
                let data1 = [];
                let data2 = [];
                let data3 = [];
                let data4 = [];
                let data5 = [];
                if (data.length == 0) {
                    // 就一个状态
                    const end = this.timeValue[1].getFullYear() + "-" + (this.timeValue[1].getMonth() + 1) + "-" + this.timeValue[1].getDate();
                    const today = new Date();
                    const todayEnd = today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate();
                    if (end == todayEnd) {
                        // 结束时间为当前时刻
                        let stime = this.timeValue[0].getTime();
                        let end = new Date().getTime();
                        data1.push([stime,end,2]);
                    } else {
                        // 结束时间为选择的时间
                        let stime = this.timeValue[0].getTime();
                        let end = this.timeValue[1].getTime();
                        data1.push([stime, end, 2]);
                    }
                } else {
                    // 查看第一个数据是否为搜索起始时间的前一天
                    let stime = null;
                    let etime = null;
                    for (let i = 0; i < data.length; i++) {
                        if (i + 1 != data.length) {
                            stime = new Date(data[i].OccurTime.split(".")[0]);
                            etime = new Date(data[i + 1].OccurTime.split(".")[0]);
                            switch (data[i].StatusCode) {
                                case 1: {
                                    if (data1.length != 0) {
                                        let _stime = stime.getFullYear() + "-" + stime.getMonth() + "-" + stime.getDate() + " " + stime.getHours() + ":" + stime.getMinutes() + ":" + stime.getSeconds();
                                        let lastTime = data1[data1.length - 1][1];
                                        let _lastTime = lastTime.getFullYear() + "-" + lastTime.getMonth() + "-" + lastTime.getDate() + " " + lastTime.getHours() + ":" + lastTime.getMinutes() + ":" + lastTime.getSeconds();
                                        if (_stime == _lastTime) {
                                            data1[data1.length - 1][1] = etime;
                                        } else {
                                            data1.push([stime, etime, 2]);
                                        }
                                    } else {
                                        data1.push([stime, etime, 2]);
                                    }
                                    break;
                                }
                                case 2: {
                                    if (data2.length != 0) {
                                        let _stime = stime.getFullYear() + "-" + stime.getMonth() + "-" + stime.getDate() + " " + stime.getHours() + ":" + stime.getMinutes() + ":" + stime.getSeconds();
                                        let lastTime = data2[data2.length - 1][1];
                                        let _lastTime = lastTime.getFullYear() + "-" + lastTime.getMonth() + "-" + lastTime.getDate() + " " + lastTime.getHours() + ":" + lastTime.getMinutes() + ":" + lastTime.getSeconds();
                                        if (_stime == _lastTime) {
                                            data2[data2.length - 1][1] = etime;
                                        } else {
                                            data2.push([stime, etime, 1]);
                                        }
                                    } else {
                                        data2.push([stime, etime, 1]);
                                    }
                                    break;
                                }
                                case 3: {
                                    if (data3.length != 0) {
                                        let _stime = stime.getFullYear() + "-" + stime.getMonth() + "-" + stime.getDate() + " " + stime.getHours() + ":" + stime.getMinutes() + ":" + stime.getSeconds();
                                        let lastTime = data3[data3.length - 1][1];
                                        let _lastTime = lastTime.getFullYear() + "-" + lastTime.getMonth() + "-" + lastTime.getDate() + " " + lastTime.getHours() + ":" + lastTime.getMinutes() + ":" + lastTime.getSeconds();
                                        if (_stime == _lastTime) {
                                            data3[data3.length - 1][1] = etime;
                                        } else {
                                            data3.push([stime, etime, 1]);
                                        }
                                    } else {
                                        data3.push([stime, etime, 1]);
                                    }
                                    break;
                                }
                                case 4: {
                                    if (data4.length != 0) {
                                        let _stime = stime.getFullYear() + "-" + stime.getMonth() + "-" + stime.getDate() + " " + stime.getHours() + ":" + stime.getMinutes() + ":" + stime.getSeconds();
                                        let lastTime = data4[data4.length - 1][1];
                                        let _lastTime = lastTime.getFullYear() + "-" + lastTime.getMonth() + "-" + lastTime.getDate() + " " + lastTime.getHours() + ":" + lastTime.getMinutes() + ":" + lastTime.getSeconds();
                                        if (_stime == _lastTime) {
                                            data4[data4.length - 1][1] = etime;
                                        } else {
                                            data4.push([stime, etime, 1]);
                                        }
                                    } else {
                                        data4.push([stime, etime, 1]);
                                    }
                                    break;
                                }
                                case 5: {
                                    if (data5.length != 0) {
                                        let _stime = stime.getFullYear() + "-" + stime.getMonth() + "-" + stime.getDate() + " " + stime.getHours() + ":" + stime.getMinutes() + ":" + stime.getSeconds();
                                        let lastTime = data5[data5.length - 1][1];
                                        let _lastTime = lastTime.getFullYear() + "-" + lastTime.getMonth() + "-" + lastTime.getDate() + " " + lastTime.getHours() + ":" + lastTime.getMinutes() + ":" + lastTime.getSeconds();
                                        if (_stime == _lastTime) {
                                            data5[data5.length - 1][1] = etime;
                                        } else {
                                            data5.push([stime, etime, 2]);
                                        }
                                    } else {
                                        data5.push([stime, etime, 2]);
                                    }
                                    break;
                                }
                            }
                        }
                    }
                }
                this.updteChart(data1, data2, data3, data4, data5)
            },
            // 更新Echarts
            updteChart(data1, data2, data3, data4, data5) {
                option.series[0].data = data1;
                option.series[1].data = data2;
                option.series[2].data = data3;
                option.series[3].data = data4;
                option.series[4].data = data5;
                this.mychart.setOption(option);

            },
            // 点击Echarts
            clickEcharts(params) {
                this.form.stime = params.data[0].getFullYear() + "-" + (params.data[0].getMonth() + 1) +
                    "-" + params.data[0].getDate() + " " + params.data[0].getHours() +
                    ":" + params.data[0].getMinutes() + ":" + params.data[0].getSeconds();
                this.form.etime = params.data[1].getFullYear() + "-" + (params.data[1].getMonth() + 1) +
                    "-" + params.data[1].getDate() + " " + params.data[1].getHours() +
                    ":" + params.data[1].getMinutes() + ":" + params.data[1].getSeconds();
                this.form.totalTime = ((params.data[1].getTime() - params.data[0].getTime()) / (1000 * 60)).toFixed(2) + " 分钟"
                this.form.status = params.seriesName;
                // 根据stime 和 etime，搜索填写记录
                this.getRecordInfoData();
            },
            // 获取机床通讯状态
            getMachineStatus() {
                let url = '@Url.Content("~/DeviceManage/DeviceDetail/GetOpcStatus")'
                axios.get(url, {
                    params: {
                        deviceCode: this.deviceCode
                    }
                }).then(res => {
                    if (res.data.result != null) {
                        if (this.deviceStatus != res.data.result.IsConnected) {
                            this.deviceStatus = res.data.result.IsConnected
                        }
                    } else {
                        if (this.deviceStatus != false) {
                            this.deviceStatus = false;
                        }
                    }
                }).catch(err => {
                    if (this.deviceStatus != false) {
                        this.deviceStatus = false;
                    }
                })
            },
            // 获取报警信息
            getMachineAlarm() {
                let url = '@Url.Content("~/DeviceManage/DeviceDetail/GetDeviceAlarm")'
                axios.get(url, {
                    params: {
                        deviceCode: this.deviceCode
                    }
                }).then(res => {
                    if (res.data.deviceAlarms.length != 0) {
                        this.alarmList = [];
                        for (let i = 0; i < res.data.deviceAlarms.length; i++) {
                            this.alarmList.push({
                                alarmID: res.data.deviceAlarms[i].alarmID,
                                alarmInfo: res.data.deviceAlarms[i].alarmInfo,
                                occurTime: res.data.deviceAlarms[i].occurTime
                            })
                        }
                        this.alarmShow = true;
                    }
                }).catch(err => {
                    this.alarmShow = false;
                })
            },
        },
        mounted() {
            let beforeTime = new Date().getTime() - (1000 * 60 * 60 * 24*7);
            let beforeDate = new Date(beforeTime);
            this.timeValue.push(beforeDate);
            this.timeValue.push(new Date());
            this.mychart = echarts.init(document.getElementById("chart"));
            this.mychart.setOption(option);
            this.GetTodayData();
            this.getHistoryData();
            setTimeout(() => {
                this.mychart.resize();
            }, 300)
            this.mychart.on('click', params => this.clickEcharts(params));
            setInterval(() => {
                this.GetTodayData();
            },3500)
            // 每3500ms拿一次通讯状态 报警信息
            this.getMachineStatus();
            this.getMachineAlarm();
            setInterval(() => {
                this.getMachineStatus();
                this.getMachineAlarm();
            }, 3500)
        }
    })
</script>

